<template>
  <div class="page">
    <MNavbar title="订单管理" :back="true" />

    <!-- 顶部筛选条 -->
    <div class="section">
      <div class="card toolbar-card">
        <div class="toolbar-row">
          <div class="seg">
            <div class="seg-item active">全部</div>
            <div class="seg-item">待支付</div>
            <div class="seg-item">待发货</div>
            <div class="seg-item">已发货</div>
            <div class="seg-item">已完成</div>
            <div class="seg-item">售后中</div>
          </div>
          <div class="row-gap"></div>
          <input class="search" placeholder="搜索订单号/收件人" />
        </div>
      </div>
    </div>

    <!-- 列表占位 -->
    <div class="section">
      <div class="card">
        <div class="table-head">
          <div>订单号</div>
          <div>下单时间</div>
          <div>买家</div>
          <div>金额</div>
          <div>状态</div>
          <div>操作</div>
        </div>
        <div class="empty-state" style="padding: 48px 0">暂无订单</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MNavbar from '@/components/MNavbar.vue'
</script>

<style scoped>
.toolbar-card{ padding: 16px }
.toolbar-row{ display:flex; gap:12px; align-items:center }
.row-gap{ flex:1 }
.search { width: 260px; background:#fff; border:1px solid var(--border-color); border-radius: 8px; padding: 10px; }
.seg{ display:flex; background:#f1f5f9; border-radius: 10px; padding: 4px; overflow:auto }
.seg-item{ padding: 6px 10px; border-radius: 8px; font-size: 12px; color: var(--muted-text) }
.seg-item.active{ background:#fff; color: var(--text-color); box-shadow: var(--shadow-sm) }
.table-head{ display:grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1fr 1fr; gap:12px; padding: 10px 12px; border-bottom:1px solid var(--border-color); color: var(--muted-text); font-size: 12px }
@media (max-width: 768px){ .table-head{ grid-template-columns: 1.2fr 1fr .9fr .8fr .8fr .8fr } .search{ flex:1; width:auto } }
</style>

